<template>
	<view style="display: flex;flex-direction: row;"
	:style="{
	    'background': nodeModel.configDict.componentStyle.background,
		'justify-content': nodeModel.configDict.componentStyle.justify_content,
		'width': nodeModel.configDict.componentStyle.width+'rpx',
		'height': nodeModel.configDict.componentStyle.height+'rpx',
		'line-height': nodeModel.configDict.componentStyle.lineHeight+'rpx',
		'marginTop': nodeModel.configDict.componentStyle.marginTop+'rpx',
		'marginBottom': nodeModel.configDict.componentStyle.marginBottom+'rpx',
		'marginLeft': nodeModel.configDict.componentStyle.marginLeft+'rpx',
		'marginRight': nodeModel.configDict.componentStyle.marginRight+'rpx',
		'paddingTop': nodeModel.configDict.componentStyle.paddingTop+'rpx',
		'paddingBottom': nodeModel.configDict.componentStyle.paddingBottom+'rpx',
		'paddingLeft': nodeModel.configDict.componentStyle.paddingLeft+'rpx',
		'paddingRight': nodeModel.configDict.componentStyle.paddingRight+'rpx',
		'color': nodeModel.configDict.componentStyle.colorForText1,
	    'font-size': nodeModel.configDict.componentStyle.fontsizeForText1 + 'rpx',
	    'font-weight': nodeModel.configDict.componentStyle.fontweightForText1,
		}" @click="itemHandle(nodeModel.configDict.componentStyle)">
		{{ nodeModel.configDict.componentStyle.text }}
	</view>
</template>

<script>
	import {count} from '@/common/utils/count.js'
	export default{
		name: 'jc-grid',
		props: {
			nodeModel: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
			}
		},
		methods:{
			itemHandle(e){
				this.$emit('itemHandle', e)
			}
		}
	}
</script>

<style>
</style>
